<template>
    <div>
        <h1>新增菜谱</h1>
      <table>
        <tbody>
            <tr>
                <td>菜谱标题<span style="color: red;">*</span></td>
                <td><input type="text" v-model="list.ftitle"></td>
            </tr>
            <tr>
                <td>图片<span style="color: red;">*</span></td>
                <td>
                    <input type="file" @change="upd">
                    <img :src="'https://localhost:7084'+list.img" style="height: 100px; width: 100px;" alt="">
                </td>
            </tr>
            <tr>
                <td>菜谱类型<span style="color: red;">*</span></td>
                <td>
                    <select v-model="list.tid">
                        <option v-for="a in Bna" :value="a.tid">{{a.tname}}</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>发布时间<span style="color: red;">*</span></td>
                <td><input type="date" v-model="list.createtime"></td>
            </tr>
            <tr>
                <td>菜谱介绍<span style="color: red;">*</span></td>
                <td><textarea v-model="list.fxq"></textarea></td>
            </tr>
            <tr>
                <td colspan="2"><input type="button" value="添加" @click="Add"></td>
                <td></td>
            </tr>
          
        </tbody>
      </table>
    </div>
</template>

<script setup lang="ts">
import{ref,onMounted}from"vue";
import axios from "axios";
import { useRouter } from "vue-router";
const router=useRouter();
//上传
const upd=(a:any)=>{
   var f=a.target.files[0];
   var fs=new FormData();
   fs.append("file",f);

   axios.post('https://localhost:7084/api/Upfile/UpFile',fs).then(res=>{
        list.value.img=res.data;
   })
}








//绑定
onMounted(()=>{
    Bang();
})
const Bna=ref([{
     "tid": 1,
    "tname": "牛肉"
}])

const Bang=()=>{
    axios.get('https://localhost:7084/api/Type/Bang',{params:Bna.value}).then(res=>{
             Bna.value=res.data;
    })
}





//添加
const list=ref({
    "fid": 0,
  "ftitle": "",
  "img": "",
  "tid": 0,
  "createtime": "2025-03-19T01:59:20.890Z",
  "fxq": ""
})

const Add=()=>{
    if(list.value.ftitle==""){
        alert('菜谱标题不能为空');
        return;
    }
    if(list.value.fxq==""){
        alert('菜谱介绍不能为空');
        return;
    }
   
    if(list.value.tid*1==0){
        alert('类型不能为空');
        return;
    }
    if(list.value.createtime==""){
        alert('发布时间不能为空');
        return;
    }
    axios.post('https://localhost:7084/api/Food/Add',list.value).then(res=>{
            if(res.data>0){
                alert('添加成功');
                router.push({
                    path:"/Show"
                })
            }else{
                alert('添加失败');
            }
    })
}
</script>

<style scoped>

</style>